---
title: File Trigger
description: Allows a user to access the file system with any pressable aria component.
links:
  - label: Aria docs
    href: https://react-spectrum.adobe.com/react-aria/FileTrigger.html
  - label: Report an issue
    href: https://github.com/mehdibha/dotUI/issues/new/choose
  - label: Edit this page
    href: https://github.com/mehdibha/dotUI/tree/main/content/components/buttons/file-trigger.mdx?plain=1
---

<ComponentPreview
  name="file-trigger/demos/default"
  preview={`<FileTrigger>
    <Button prefix={<UploadIcon />}>Upload</Button>
</FileTrigger>`}
/>

## Installation

```package-install
npx shadcn@latest add @dotui/file-trigger
```

## Anatomy

A `FileTrigger` wraps around a pressable child such as a button, and includes a visually hidden input element that allows the user to select files from their device.

```tsx
import { Button } from "@/components/core/button";
import { FileTrigger } from "@/components/core/file-trigger";

<FileTrigger>
  <Button>Upload</Button>
</FileTrigger>;
```

## Accepted file types

By default, the file trigger will accept any file type. To support only certain file types, pass an array of the [mime type](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types) of files via the `acceptedFileTypes` prop.

<ComponentPreview
  name="file-trigger/demos/file-types"
  preview={`<FileTrigger acceptedFileTypes={["image/*"]}>
    <Button prefix={<UploadIcon />}>Upload</Button>
</FileTrigger>`}
/>

## Multiple files

A file trigger can accept multiple files by passsing the `allowsMultiple` prop.

<ComponentPreview
  name="file-trigger/demos/multiple-files"
  preview={`<FileTrigger allowMultiple>
    <Button prefix={<UploadIcon />}>Upload</Button>
</FileTrigger>`}
/>

## Directory selection

To enable selecting directories instead of files, use the `acceptDirectory` property.<br/>
This reflects the [webkitdirectory](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory) HTML attribute and allows users to select directories and their contents. Please note that support for this feature varies from browser to browser.

<ComponentPreview
  name="file-trigger/demos/directory-selection"
  preview={`<FileTrigger acceptDirectory>
    <Button prefix={<UploadIcon />}>Upload</Button>
</FileTrigger>`}
/>

## Media capture

To specify the media capture mechanism to capture media on the spot, pass user for the user-facing camera or environment for the outward-facing camera via the defaultCamera prop.<br/>
This behavior only works on mobile devices. On desktop devices, it will open the file system like normal. [Read more about capture](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture).

<ComponentPreview
  name="file-trigger/demos/media-capture"
  preview={`<FileTrigger defaultCamera="environment">
    <Button prefix={<UploadIcon />}>Upload</Button>
</FileTrigger>`}
/>

## API Reference

| Prop                | Type                      | Description                                                                      |
| ------------------- | ------------------------- | -------------------------------------------------------------------------------- |
| `children`          | `ReactNode`               | The children of the component.                                                   |
| `acceptedFileTypes` | `Array<string>`           | Specifies what mime type of files are allowed.                                   |
| `allowsMultiple`    | `boolean`                 | Whether multiple files can be selected.                                          |
| `defaultCamera`     | `'user' \| 'environment'` | Specifies the use of a media capture mechanism to capture the media on the spot. |
| `acceptDirectory`   | `boolean`                 | Enables the selection of directories instead of individual files.                |

| Event      | Type                                | Description                         |
| ---------- | ----------------------------------- | ----------------------------------- |
| `onSelect` | `(files: FileList \| null) => void` | Handler when a user selects a file. |

## Accessibility

### Keyboard interactions

| Key             | Description            |
| --------------- | ---------------------- |
| `Space` `Enter` | Activates the trigger. |
